<template>
  <div id="login">
  
    <LogHead></LogHead>
    <!-- <div></div> -->
 
    <div class="bgi">
        
      <div class="login">
        <div class="loginlink">
          <span class="bank" :class="{abu:isRun}" @click="number">账号登陆</span>
          <h1>|</h1>
          <span class="code" :class='{abu:isRun1}' @click="code">扫码登陆</span>
        </div>
        <Loginbank v-if="isShow"></Loginbank>
        <LoginCode v-else></LoginCode>
      </div>
    </div>

 <LogFoot></LogFoot>
  </div>
</template>
<script>
//登录头部组件
import LogHead from "@/components/LogHead";
//登录尾部组件
import LogFoot from "@/components/LogFoot";
//账号登录组件
import Loginbank from "@/components/Loginbank";
//二维码登录组件
import LoginCode from "@/components/LoginCode";
export default {
    data:()=>{
    return{
        //控制账号二维码出现
       isShow:true,
       isRun:true,
       isRun1:false,
    }
    },
     methods:{
      code(){
             this.isShow = false;
             this.isRun=false;
             this.isRun1=true
      },
      number(){
           this.isShow = true,
           this.isRun=true,
       this.isRun1=false
      }
  },

  components: {
    LogHead,
    LogFoot,
    Loginbank,
    LoginCode
  },
 
};
</script>

<style lang="scss" scoped>
a {
  text-decoration: none;
}

#login{
  // display: none;

.bgi {
 
  height: 576px;
  background-image: url('../img/bgi.png');
  position: relative;
  .login {
    //margin: 37px 369px 0px 1139px;
    left: 345px;
    top: 40px;
    position: absolute;
    width: 410px;
    height: 510px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    .loginlink {
      margin-top: 30px;
      width: 80%;
      display: flex;
      justify-content: space-around;
    //   a {
    //     &.router-link-exact-active {
    //       color: #ff6600;
    //     }
    //   }
    }
    .bank {
      width: 97px;
      height: 23px;
      font-family: PingFangSC-Regular;
      font-size: 24px;
      font-weight: bold;
      font-stretch: normal;
      line-height: 60px;
      letter-spacing: 0px;
    //   color: #666666;
    
        
        
    }
    .abu{
      color: #ff6600;
    }
    h1{
            // color: #666666;
            line-height: 60px;
        }

    .code {
      width: 97px;
      height: 23px;
      font-family: PingFangSC-Regular;
      font-size: 24px;
      font-weight: bold;
      font-stretch: normal;
      line-height: 60px;
      letter-spacing: 0px;
      // color: #666666;
    }
  }
}
}


</style>